import Favo from "./Favo";
import { settings } from "../settings";
import { vendorEditFavo } from "../Vendor";
import { filteredBox } from "../signals";

const FavoBox = () => (
  <div
    class="m-auto mt-5 grid min-h-[50dvh] auto-rows-auto content-start justify-around text-center"
    style={{
      gridTemplateColumns: `repeat(auto-fill, ${settings.value.favo.size}px)`,
      columnGap: settings.value.favo.columnGap,
      rowGap: settings.value.favo.rowGap,
      width: `calc(var(--screen-w) * ${settings.value.favo.width / 100})`,
    }}
    onContextMenu={vendorEditFavo}
  >
    {filteredBox.value.map((box, index) => (
      <Favo box={box} key={index} />
    ))}
  </div>
);

export default FavoBox;
